path: root/src/routes/grocery/[id]/+page.svelte

<script lang="ts">
	import { enhance } from '$app/forms';

	let { data, form } = $props();
	let name = $state('');
	let categoryId = $state(-1);
	let saved = $state(false);
	let isSubmitting = $state(false);
	let formRef: HTMLFormElement;

	$effect(() => {
		name = data.item.name;
		categoryId = data.item.categoryId ?? -1;
	});

	$effect(() => {
		if (form?.success && form?.type === 'update') {
			saved = true;
			const t = setTimeout(() => (saved = false), 2000);
			return () => clearTimeout(t);
		}
	});

	function submitIfChanged() {
		if (isSubmitting) return;
		const currentCategoryId = data.item.categoryId ?? -1;
		if (name === data.item.name && categoryId === currentCategoryId) return;
		if (!name.trim()) return;

		isSubmitting = true;
		formRef.requestSubmit();
	}

	let reference = $state('');
	let price = $state('');
	let unit = $state('€/kg');
	let qualityScore = $state('');
</script>

<main>
	<form
		bind:this={formRef}
		class="form-card"
		method="POST"
		action="?/update"
		use:enhance={() => {
			return async ({ update }) => {
				await update({ reset: false });
				isSubmitting = false;
			};
		}}
	>
		<label>
			<span class="form-label">Nom</span>
			<input
				class="form-input"
				type="text"
				name="name"
				bind:value={name}
				onblur={submitIfChanged}
				onkeydown={(e) => {
					if (e.key === 'Enter') {
						e.preventDefault();
						submitIfChanged();
					}
				}}
			/>
		</label>
		<label>
			<span class="form-label">Catégorie</span>
			<select
				class="form-select"
				name="category_id"
				bind:value={categoryId}
				onblur={submitIfChanged}
			>
				<option value={-1}>—</option>
				{#each data.categories as cat (cat.id)}
					<option value={cat.id}>{cat.name}</option>
				{/each}
			</select>
		</label>
		<p class="save-status" class:visible={saved}>✓ Enregistré</p>
	</form>

	<hr />

	<h2>Références</h2>

	<form class="form-card" method="POST" action="?/add" use:enhance>
		<label>
			<span class="form-label">Référence</span>
			<input
				class="form-input"
				type="text"
				name="reference"
				bind:value={reference}
				placeholder="ex. Carte Noire"
				autocomplete="off"
			/>
		</label>
		<div class="ref-row">
			<label>
				<span class="form-label">Prix</span>
				<input
					class="form-input"
					type="number"
					name="price"
					bind:value={price}
					placeholder="5.99"
					step="0.01"
				/>
			</label>
			<label>
				<span class="form-label">Unité</span>
				<select class="form-select" name="unit" bind:value={unit}>
					<option value="€/kg">€/kg</option>
					<option value="€/L">€/L</option>
					<option value="€/u">€/u</option>
				</select>
			</label>
			<label>
				<span class="form-label">Note</span>
				<input
					class="form-input"
					type="number"
					name="quality_score"
					bind:value={qualityScore}
					placeholder="0–100"
					min="0"
					max="100"
				/>
			</label>
		</div>
		<button class="btn-primary" type="submit">Ajouter une référence</button>
	</form>

	{#if form?.error}
		<p class="error">{form.error}</p>
	{/if}

	<form method="POST" action="?/delete" use:enhance>
		<ul class="item-list item-list--wide">
			{#each data?.references ?? [] as ref (ref.id)}
				<li class="item-row item-row--ref">
					<div class="ref-info">
						<strong>{ref.reference}</strong>
						{#if ref.price}
							<span class="ref-detail"
								>{ref.price.toFixed(2)}{ref.unit ? ` ${ref.unit}` : ''}</span
							>
						{/if}
						{#if ref.qualityScore != null}
							<span class="ref-detail">Note : {ref.qualityScore}/100</span>
						{/if}
					</div>
					<button
						class="btn-ghost"
						name="id"
						value={ref.id}
						type="submit"
						aria-label="Supprimer"
					>
						&times;
					</button>
				</li>
			{/each}
		</ul>
	</form>

	{#if (data?.references?.length ?? 0) === 0}
		<p class="empty">Aucune référence</p>
	{/if}

	<form method="POST" action="?/deleteItem" use:enhance>
		<input type="hidden" name="from" value={data.from} />
		<button type="submit" class="delete-item-btn">Supprimer l'article</button>
	</form>

	<a href={data.from} class="back-link">&larr; Retour</a>
</main>

<style>
	.ref-row {
		display: flex;
		gap: 0.75rem;
		flex-wrap: wrap;
	}

	.ref-row label {
		flex: 1;
		min-width: 6rem;
	}

	.ref-info {
		flex-grow: 1;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		align-items: baseline;
	}

	.ref-detail {
		color: var(--text-secondary);
		font-size: 0.875rem;
		font-weight: 500;
		background: var(--bg);
		padding: 0.125rem 0.5rem;
		border-radius: 0.375rem;
	}

	.error {
		margin-top: -0.25rem;
		margin-bottom: 0.5rem;
	}

	.empty {
		margin-top: 0.75rem;
		padding: 1.5rem;
	}

	hr {
		border: none;
		border-top: 1.5px solid var(--border);
		margin: 1.5rem 0;
	}

	.back-link {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		margin-top: 1.5rem;
		color: var(--text-secondary);
		text-decoration: none;
		font-size: 0.875rem;
		font-weight: 500;
		transition: color 0.2s;
	}

	.back-link:hover {
		color: var(--accent);
	}

	.delete-item-btn {
		margin-top: 1.5rem;
		padding: 0.625rem 1.25rem;
		border: 1.5px solid var(--danger);
		border-radius: 0.75rem;
		background: var(--surface);
		color: var(--danger);
		font-size: 0.875rem;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.delete-item-btn:hover {
		background: var(--danger-bg);
		transform: translateY(-1px);
	}

	.save-status {
		font-size: 0.875rem;
		color: var(--success);
		font-weight: 500;
		margin-top: -0.25rem;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.2s ease;
		min-height: 1.25rem;
	}

	.save-status.visible {
		visibility: visible;
		opacity: 1;
	}
</style>